{#{% load static %}#}
{% extends 'base/header.html' %}

{% block title %}
    博客详情
{% endblock %}
{% block body %}
    <h2>{{ blog_model.title }}</h2>
    <hr>
    <div class="d-flex justify-content-start border-bottom">
        <span>
                <img src="{% static 'bootstrap/images/1733735937830.jpg' %}" width="50px" height="50px"
                     class="rounded-5"
                     alt="我是一个图片">
            <span>Jay</span>
            <span>于</span>
{#            blog.date_time|date:"Y-m-d H:i:s"#}
            <span>{{ blog_model.date_time | date:"Y-m-d H:i:s" }}</span>
        </span>
    </div>

    <div class="m-4 text-muted d-flex  shadow-lg p-3 mb-5 bg-white overflow-auto" style="height: 50%">
        <blockquote class="blockquote scrollspy-example bg-body-tertiary p-3 rounded-2"
                    data-bs-spy="scroll" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
            <p class="mb-0">{{ blog_model.content | safe }}</p>
        </blockquote>
        {#            <p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>#}
        {#            <div>#}
        {#                <img src="{% static 'bootstrap/images/1733735937830.jpg' %}"#}
        {#                     class="rounded-5" alt="我是一个图片">#}
        {#            </div>#}
        {#            <div class="text-center">发布时间: 2024年12月9日17:33:39</div>#}
    </div>
    <hr>
    <h2>评论<strong>{{ commentCount }}</strong>:</h2>
   {% if user.is_authenticated %}
    <div class="mb-3">
        <input type="hidden" class="form-control" id="blog_id" value="{{ blog_model.id }}">
        <input type="text" class="form-control" id="comment">
    </div>
    <div class="d-flex mb-3">
        <div class="ms-auto py-02">
            <button type="button" class="btn btn-primary" id="submition">提交信息</button>
        </div>
    </div>
    {% endif %}
    <div class="mt-2">
        <ul class="text-muted  list-group">
            {% for comment in  blog_comments %}
            <li class="list-group-item mb-2">
                <div class="p-2 flex-fill user-info">
                    <img src="{% static 'bootstrap/images/1733735937830.jpg' %}" width="60px" height="60px"
                         class="rounded-5" alt="我是一个图片">
                    <span class="text-black px-3 ">李三</span>
                </div>
                <div class="p-2 align-self-center">{{ comment.content }}
                </div>
                <div class="p-2 flex-fill text-sm-start">评论时间:    {{ comment.comment_date_time |date:'Y-m-d H:i:s'}}</div>
            </li>
            {% endfor %}
        </ul>
    </div>

    <script>
        $('#submition').bind('click', function (vale) {
            let blog_id = $("#blog_id").val()
            let comment = $("#comment").val()
            if (comment.length<=0){
                alert("请输入评论内容!")
                return
            }
            $.ajax(
                {
                    type: 'POST',
                    url: "/blog/comment/publish",
                    data: {
                        'content': comment,
                        'blog_id': blog_id
                    },
                    success: function (res) {
                        if (res.code == 200){
                            alert(res.msg)
                            location.href = `/blog/info/${blog_id}`
                        }
                        else {
                            confirm("服务器异常！")
                        }
                    }
                }
            );
        })

    </script>
{% endblock %}